/**
 *@description 折线图堆叠
 *@author yhw
 */
import React, {
    Component,
    PropTypes
} from 'react';
import {
    connect
} from 'react-redux';
import ReactEcharts from 'echarts-for-react';
import toExcel from '../../utils/toExcel';
import downImg from '../../utils/downImg';

const LineStack = ({
    seriesName,
    width,
    height,
    data,
    labelRotate,
    loading,
    dispatch
}) => {
    if (!data || !data.series || (data.series && data.series.length <= 0)) {
        return (<div className="emptyData">暂无数据</div>)
    }
    let option = {
        tooltip: {
            trigger: 'axis',
            // formatter: function(arg) {
            //     return arg.seriesName + '<br />' + arg.name + '：' + (parseInt(arg.value).formatMoney())
            // }
        },

        legend: {
            textStyle: {
                color: '#fff'
            },
            y: 'bottom',
            data: data && data.legend || []
        },
        // color: ['#00b050', '#ed7d31', '#a5a5a5', '#ffc000', '#4472c4'],
        xAxis: [{
            type: 'category',
            data: data && data.xAxisData || [],
            axisTick: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            },
            axisLabel: {
                interval: 0, //横轴信息全部显示
                rotate: labelRotate || 0,

            },
        }],
        yAxis: [{
            type: 'value',
            splitLine: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#fff'
                }
            },
            axisLabel: {
                show: true
            },
            axisTick: {
                show: true,
                lineStyle: {
                    color: '#bdbdbd'
                }
            },
        }],
        series: data && data.series || []
    };

    let timeId = 'bar' + new Date().getTime();

    return (
        <div>
          <div className="downloads">
                <span className="dimg" onClick={downImg.bind(this,timeId,seriesName)}></span>
          </div>
          <div id={timeId}><ReactEcharts
                option={option}
                style={{width:width, height: height}}
                theme={"theme_name"}
                showLoading={loading} /></div>
        </div>
    );
};

LineStack.propTypes = {
    width: PropTypes.string.isRequired,
    height: PropTypes.number.isRequired,
    loading: PropTypes.bool,
    seriesName: PropTypes.string,
    labelRotate: PropTypes.number,
    data: PropTypes.object //.isRequired
};

export default connect()(LineStack);
